<script setup lang="ts">
import useScroll from "@/components/Scroll/useScroll";
import GoodsInfo from "@/pages/shop/index/goods_info.vue";
import { ref } from "vue";

defineProps(["list"]);
const emit = defineEmits(["cancel", "confirm", "product"]);
const popup = ref();
const goods = ref();
const goodId = ref();
const { container, update } = useScroll({
  onChange: (scrollTop: number) => {
    if (scrollTop < -100) {
      popup.value.close();
    }
  }
});

defineExpose({
  open: async (id: string) => {
    goodId.value = id;
    popup.value.open();
    // #ifdef MP-WEIXIN
    update();
    const info = await goods.value.init(goodId.value);
    if (info) {
      emit("product", info);
    }
    // #endif
  },
  close: () => {
    popup.value.close();
  }
});
const onLoad = async () => {
  if (goodId.value) {
    update();
    const info = await goods.value.init(goodId.value);
    if (info) {
      emit("product", info);
    }
  }
};
</script>

<template>
  <uv-popup ref="popup" zIndex="999" mode="bottom" bgColor="none">
    <div class="product-container" ref="container">
      <view class="close" @click="popup.close"></view>
      <GoodsInfo ref="goods" @onload="onLoad" />
    </div>
  </uv-popup>
</template>

<style lang="scss" scoped>
.product-container {
  height: 1200rpx;
  position: relative;
  overflow-y: scroll;
  // padding: 0 40rpx;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  background-color: #fff;
  .close {
    position: absolute;
    background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/icon_close-1.png");
    width: 56rpx;
    height: 56rpx;
    background-size: cover;
    top: 20rpx;
    right: 20rpx;
    z-index: 999;
  }
}
</style>
